<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <title>后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">-->
    <link rel="stylesheet" href="/plugin/elementUI/elementUI.css">
    <link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div class="main">
    <div v-show="showList">
        <el-row type="flex" justify="start">
            <el-col :span="4">
                <el-input placeholder="请输入用户名" icon="search" v-model="queryParam.user_name" :on-icon-click="query" v-on:keyup.enter="query" />
            </el-col>
            <el-col :span="20">
                <div align='right'>
                    <shiro:hasPermission name="sys:user:add">
                        <el-button type="primary" @click="changeAddOrEdit('add')" icon="plus">新增</el-button>
                    </shiro:hasPermission>
                    <shiro:hasPermission name="sys:user:edit" >
                        <el-button type="primary" @click="changeAddOrEdit('edit')" icon="edit">修改</el-button>
                    </shiro:hasPermission>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table ref="table" :data="page.dataList" border
                          tooltip-effect="dark" style="width: 100%" @selection-change="getSelected">
                    <el-table-column type="selection" width="55" prop="uid" />

                    <el-table-column type="index" label="序号" width="80" prop="menu_id" />

                    <el-table-column prop="user_name" label="用户名" width="100" />

                    <el-table-column prop="real_name" label="真实姓名" width="100" />

                    <el-table-column prop="sex" label="性别" width="100">
                        <template scope="scope">
                            <el-tag v-show="scope.row.sex == 1" type="primary">女</el-tag>
                            <el-tag v-show="scope.row.sex == 0" type="success">男</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="contact_way" label="联系方式" width="200" />

                    <el-table-column prop="status" label="状态" width="100" :filters="statusEnum"
                                     :filter-method="filterStatus">
                        <template scope="scope">
                            <el-tag v-show="scope.row.status == 1" type="primary">启用</el-tag>
                            <el-tag v-show="scope.row.status == 0" type="danger">禁用</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="status" label="角色" width="300">
                        <template scope="scope" v-if="scope.row.roles.length > 0">
                            <el-tag v-if="scope.row.roles[0] != null" type="primary">{{ scope.row.roles[0].name }}</el-tag>
                            <el-tag v-if="scope.row.roles[1] != null" type="success">{{ scope.row.roles[1].name }}</el-tag>
                            <el-tag v-if="scope.row.roles[2] != null" type="warning">{{ scope.row.roles[2].name }}</el-tag>
                            <el-tag v-if="scope.row.roles.length > 3" type="warning">...</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column prop="create_time" label="创建时间" sortable />

                    <el-table-column fixed="right" label="操作" width="200">
                        <template scope="scope">
                            <el-button type="warning" v-if="scope.row.status == 0" @click="updateStatus(scope.row.uid,scope.row.status)" shiro:hasPermission="sys:user:updateStatus" size="small">启用</el-button>
                            <el-button type="warning" v-if="scope.row.status == 1" @click="updateStatus(scope.row.uid,scope.row.status)" shiro:hasPermission="sys:user:updateStatus" size="small">禁用</el-button>
                            <el-button type="info" size="small" shiro:hasPermission="sys:user:initPassword" @click="initPassword(scope.row.uid)">初始化密码</el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageNo" :total="page.total"
                               :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" />
            </el-col>
        </el-row>
    </div>
    <div v-show="!showList">
        <el-form label-position="right" label-width="20%" ref="form" :model="form" :rules="rules">
            <el-row type="flex" justify="start">
                <el-col :span="10">
                    <el-input v-model="form.uid" type="hidden"></el-input>
                    <el-form-item label="用户名" prop="user_name" >
                        <el-input v-model="form.user_name" :disabled="!isAdd"></el-input>
                    </el-form-item>
                    <el-form-item label="真实姓名" prop="real_name">
                        <el-input v-model="form.real_name"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio-group v-model="form.sex">
                            <el-radio :label="0">男</el-radio>
                            <el-radio :label="1">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="contact_way">
                        <el-input v-model="form.contact_way"></el-input>
                    </el-form-item>
                    <el-form-item label="角色">
                        <el-transfer filterable :filter-method="filterMethod" filter-placeholder="请输入角色名称" :props="{key: 'role_id',label: 'name'}"
                                v-model="roles" :data="allRoles" :titles="['待选', '已选']">
                        </el-transfer>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex" justify="start" :gutter="20">
                <el-col  :span="6" :offset="5">
                    <el-form-item >
                        <el-button type="primary" @click="addOrEdit" v-loading.fullscreen.lock="loading">{{text.submitButtonText}}</el-button>
                        <el-button @click="resetForm">重置</el-button>
                        <el-button type="info" @click="goBack">返回</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</div>
    <script type="text/javascript" src="/plugin/jQuery.js"></script>
    <script type="text/javascript" src="/plugin/vue.js"></script>
    <script type="text/javascript" src="/plugin/elementUI/elementUI.js"></script>
    <script type="text/javascript" src="/js/user.js"></script>
</body>
</html>